<template>
  <div>
    <el-row>
      <el-col :span="15">
        <!--  -->
        <el-form
          :model="formData"
          ref="elForm"
          :rules="rules"
          class="form-body medias-stream"
          label-width="160px"
            label-suffix="："
          v-loading="loading"
        >
       
          <el-form-item label="物料名称" prop="name">
            <el-input             
              v-model="formData.name"
              autocomplete="off"
              placeholder="请输入物料名称"
              :style="{ width: '90%' }"
            ></el-input>
          </el-form-item>
          <el-form-item label="内容展示类型" prop="cntype">
            
             <el-radio-group v-model="formData.cntype">
                <el-radio
                v-for="(item, index) in cntypeOptions"
                :key="index"
                :label="item.value"
                :disabled="item.disabled"
                >{{ item.label }}</el-radio
              >
            </el-radio-group>

            <el-row>
                <el-col :span="22">
                   <stream-view-san :cntype="formData.cntype" :cnrow="formData.cn"></stream-view-san>     
                </el-col>
            </el-row>
  
          </el-form-item>
          <!--  -->
         <el-form-item label="点击链接" prop="linkurl">
            <el-input
              v-model="formData.linkurl"
              autocomplete="off"
              placeholder=""
              :style="{ width: '90%' }"
            ></el-input>
          </el-form-item>
          <!--  -->
          <el-form-item label="目标窗口" prop="target">
            <el-radio-group v-model="formData.target" size="medium">
              <el-radio
                v-for="(item, index) in targetOptions"
                :key="index"
                :label="item.value"
                :disabled="item.disabled"
                >{{ item.label }}</el-radio
              >
            </el-radio-group>
          </el-form-item>
          <!--  -->
          <!--  -->
          <el-form-item label="展现监控链接" prop="trackurl">
            <el-input
              v-model="formData.trackurl"
              placeholder="请输入展现监控链接"
              clearable
              :style="{ width: '90%' }"
            >
            </el-input>
          </el-form-item>
          <!--  -->
          <!--  -->
          <el-form-item size="large" class="form-submit-panel">
            <el-button type="primary" @click="submitForm">提交</el-button>
            <el-button @click="resetForm">关闭</el-button>
          </el-form-item>
          <!--  -->
        </el-form>
        <!--  -->
      </el-col>
      <el-col :span="9">
          <!-- 这里是输入 信息流内容的表单 组件 -->
            <stream-form-san 
            :cntype="formData.cntype"
            :cnrow="formData.cn"
            v-on:onchange="onContentChange"></stream-form-san>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  components: {},
  props: ['mediasRow'],
  data() {
    return {
      formData: {
        id: 0,
        type:"stream",
        name: "",
        video: "", // 视频的url
        width: "",
        height: "",
        videotimeline: 0,
        linkurl: "",
        target: 1,
        cntype: 1,
        trackurl: "",
        cn:{
            pic1:"",
            pic2:"",
            pic3:"",
            video:"",
            subject:"",
            become:"",
        },
      },
      loading: false, // 提交表单时loading 效果
      videoLoading: false, //上传视频时loading 效果；
      cntypeOptions:[{
          label:"三图+标题", value:1, },
        {
          label:"一图+标题", value:2, },
          {
          label:"视频+标题", value:3, },
    ],
      targetOptions: [
        {
          label: "新窗口",
          value: 1,
        },
        {
          label: "原窗口",
          value: 2,
        },
      ],
      rules: {
        name: [
          {
            required: true,
            message: "物料名称不能为空",
            trigger: "change",
          },
        ], 
        target: [
          {
            required: true,
            message: "目标窗口不能为空",
            trigger: "change",
          },
        ],
        trackurl: [],
      },
    };
  },
  created(){
       if(!this.row  || !this.row.hasOwnProperty("id")){ return;}

      // console.log(this.row)
      // 修改是不是被类型的数据不渲染
      if(this.row.type != 'stream') { return; }
      // 
      if(this.row.content){        
        this.row['cn'] = this.row.content ;
      }
    //  
      for(var key in this.formData){
         if( this.row[key]){
              this.formData[key] = this.row[key];
         }
       }

       //初始化一些选项
      // this.formData.type = 'video';
     
  },
  computed:{
    // 监控外部属性传递进来的数据 变化了可以重新赋值
    row: function(){       
       return this.mediasRow
     }
  },
  methods: {
       // 上传 Video 素材
    handleVideoChange(response, file, fileList){
        this.formData.video = response.data;
        this.videoLoading = false;
    },
    beforeVideoUpload(file ){
      this.videoLoading=true;
    },
    onVideoUploadError(err, file, fileList){
      this.videoLoading = false;
      this.$message({message:"上传失败", type:"error"})
    },
    //内容改变时
    onContentChange( data ){
        this.formData.cn = data;
        console.log(this.formData)
    },
    // 
    submitForm() {
       //先验证 内容是否填写
       let ok = true;
       if( ! this.formData.cn.subject || ! this.formData.cn.become){
          ok = ok && false;           
       }
       if(this.formData.cntype==1){
           if(!this.formData.cn.pic1 || !this.formData.cn.pic2 || !this.formData.cn.pic3 ){
                ok = ok && false;
           }
       }
       if(this.formData.cntype==2){
           if(!this.formData.cn.pic1  ){
                ok = ok && false;
           }
       }
        if(this.formData.cntype==3){
           if(!this.formData.cn.video  ){
                ok = ok && false;
           }
       }
       if(!ok){
           this.$message({message:"请完善信息流内容", type:"error"}) ;
           return false;
       }
      // 提交表单处理 先 验证，通过后提交到接口
      this.$refs["elForm"].validate((valid) => {
        if (!valid) return;
        this.loading = true;
        // TODO 提交表单
        // console.log(this.formData)
        //  提交数据到接口，更新和新建通过 formData.id > 0 来区别
         PlaceAPI.createMedias(this.formData).then((data)=>{
            this.loading = false;
            this.$message({ message: data.msg, type: "success" });
            // 触发关闭Drawer 侧滑层 关闭
            this.formData.id = data.value;
            // 添加成功返回 data.vaule = 物料id；
            this.$emit("onclosedrawer",{ from: 'submit',row: this.formData })
         })

      });
    },
    resetForm() {
       this.$emit("onclosedrawer",{ from: ''})
    },
  },
};
</script>
